<div class="myvolumio-current-plan-card">
  <div class=" plans-table">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title" translate='MYVOLUMIO.CURRENT_PLAN'></h3>
      </div>
      <div class="panel-body">
        <div class="the-price">
          <h1>
            {{myVolumioCurrentPlanCardController.user.plan || 'FREE' | uppercase}}
          </h1>
          <small ng-if="myVolumioCurrentPlanCardController.user.expire_at">
            <span translate="MYVOLUMIO.EXPIRING"></span>:
            {{myVolumioCurrentPlanCardController.getDate(myVolumioCurrentPlanCardController.user.expire_at) | date}}
          </small>
        </div>
      </div>
      <div class="panel-footer">
        <a ng-if="myVolumioCurrentPlanCardController.isTargetingProfile()" ng-click="myVolumioCurrentPlanCardController.goToProfile()" class="btn btn-success btn-labeled">
          <span class="btn-label"><i class="glyphicon glyphicon-user"></i></span>
          <span translate="MYVOLUMIO.GO_TO_PROFILE"></span>
        </a>
        <button ng-if="!myVolumioCurrentPlanCardController.isLifeTimePlan() && myVolumioCurrentPlanCardController.isTargetingUpgrade()" type="button" class="btn btn-labeled btn-success" ng-click="myVolumioCurrentPlanCardController.goToPlans();">
          <span class="btn-label"><i class="glyphicon glyphicon-triangle-top"></i></span>
          <span translate="MYVOLUMIO.CHANGE_PLAN"></span>
        </button>
      </div>

    </div>
  </div>
</div>
